import React from 'react';
import { StarO, Star } from '@react-vant/icons';

const CategoryInfo = () => {
    let navigate = React.$router.useNavigate();
    let [searchParams] = React.$router.useSearchParams();
    const [cateid, setCateid] = React.useState(searchParams.get('cateid') ?? 0)
    const [Business, setBusiness] = React.useState(React.$cookie.load('User') ?? {})
    const [info, setInfo] = React.useState({})
    const [prev, setPrev] = React.useState({})
    const [next, setNext] = React.useState({})

    React.useEffect(() => {
        getInfoData();
    }, [cateid])

    async function getInfoData() {
        let result = await React.$api.categoryInfo({
            cateid: cateid,
            busid: Business.id ?? 0
        })
        if (result && result.code == 1) {
            setInfo(result.data.info)
            setPrev(result.data.prev)
            setNext(result.data.next)
        }
    }

    // 上一篇
    const Prev = () => {
        if (prev) {
            return (
                <p onClick={() => setCateid(prev.id)}><React.$router.NavLink to={`/category/info?cateid=${prev.id}`}> 上一篇：{prev.name}</React.$router.NavLink></p>
            )
        } else {
            return (
                <p>上一篇：暂时无数据</p>
            )
        }
    }

    // 下一篇
    const Next = () => {
        if (next) {
            return (
                <p onClick={() => setCateid(next.id)}>下一篇：<React.$router.NavLink to={`/category/info?cateid=${next.id}`}>{next.name}</React.$router.NavLink></p>
            )
        } else {
            return (
                <p>下一篇：暂时无数据</p>
            )
        }
    }
    // 收藏 
    const Collection = () => {
        if (info.collect_statsu) {
            return (
                <a href="#" onClick={ChangeCollection}> <Star fontSize="1.5em" /> 已收藏</a>
            )
        } else {
            return (
                <a href="#" onClick={ChangeCollection}> <StarO fontSize="1.5em" />收藏</a>
            )
        }
    }
    // 收藏事件
    const ChangeCollection = async() => {
        if (Object.values(Business).length > 0) {
            let result = await React.$api.categoryCollection({
                cateid: cateid,
                busid: Business.id ?? 0
            })
            if (result.code == 1) {
                React.$vant.Toast.success({
                    message: result.msg,
                })
                getInfoData();
            } else {
                React.$vant.Toast.fail(result.msg)
            }
        } else {
            React.$vant.Toast.info({
                message: '未登陆，请先登陆'
            })
            navigate('/business/login')
            return false;
        }
    }

    return (
        <>
            <React.$vant.NavBar
                title="学术详情"
                leftText=""
                onClickLeft={() => navigate('/category/index')}
            />
            <div className="xs_Xiangq">
                <div className="bt">
                    <h2>{info.name}</h2>
                    <div className="text">
                        <span></span>
                        <span>{info.createtime}</span>
                    </div>
                </div>
                <div className="wom_de">
                    <p>	{info.description}</p>
                </div>
                <div className="niming_sq niming_sq_xs_xq">
                    <Collection />
                </div>
            </div>

            <div className="rem2"></div>
            <div className="shangxia_piab">
                <Prev />
                <Next />
            </div>
        </>
    )
}

export default CategoryInfo